<template>
    <div>
        <ProductStatisticsCondition
            @comReturn="comReturn"
            @handleButton="handleButtonEmit"
            :isFirst="isFirst && activeValue === 'product-statistics'"
            class="content"
        ></ProductStatisticsCondition>
        <!-- <keep-alive>
                <component
                    :is="item.content"
                    :activeValue="activeValue"
                    @comReturn="comReturn"
                    @handleButton="handleButtonEmit"
                    :isFirst="isFirst && activeValue === 'product-statistics'"
                ></component>
            </keep-alive> -->
        <!-- 关于动态组件作为组件的引入 -->
        <div class="noOpened">
            <RiskTableP
                :ref="'risk-table-' + type"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :column="showColumns"
                :paging="paging"
                v-loading="tableLoading"
                @page-change="getTableData"
                @checkRowKeys-change="checkRowKeysChangeEmit"
                :key="tableKey"
            >
            </RiskTableP>
        </div>
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="'TN_PRODUCT_STATISTICS'"
            :visible.sync="layoutDialog"
            :column="tableColumns"
            :fixedColumns="fixedColumns"
        />
    </div>
</template>
<script lang="ts">
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import ProductStatisticsCondition from './product-statistics-condition.vue';
import { TransfiniteIndicator } from '../../class/transfinite-Indicator';
import API from '../../api/transfinite-Indicator';
import { ProductStatisticsDTO } from '../../vo/transfinite-Indicator';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({ name: 'ProductStatistics', components: { RiskTableLayout, RiskTableP, ProductStatisticsCondition } })
export default class ProductStatistics extends TransfiniteIndicator {
    @Prop() activeValue: string;
    type: string = 'product';

    tableColumns: any = this.columnUtil.fundsTableColumns;

    fixedColumns: any[] = [{ title: '产品代码/名称', field: 'dictFundCodes', minWidth: '150px', render: value => this.formatDictFundCodes(value) }];

    layoutTableName: string = 'TN_PRODUCT_STATISTICS';

    requestTableMethodName: any = API.productStatisticsList;

    loadOutRequestName: any = API.downLoadFileProduct;

    searchParam: ProductStatisticsDTO = {
        fundCode: [],
        eventStatus: '',
        startTradeDate: '',
        endTradeDate: '',
    };

    @Watch('activeValue', { immediate: true })
    async handleActiveValue() {
        if (this.activeValue === 'product-statistics') {
            if (this.isFirst) {
                this.getTableData();
                this.isFirst = false;
            }
        }
    }

    mounted() {
        // 监听布局设置
        super.watchShowColumns();
    }

    getTableData() {
        return super.getTableData();
    }

    async handleButtonEmit(type: string) {
        if (type == 'search') {
            if (this.searchParam.eventStatus == '1') {
                this.tableColumns = this.columnUtil.fundsTableColumnsHistory;
                const ref = this.$refs['risk-table-layout'] as any;
                ref && ref.getDefaultSelected();
            } else {
                this.tableColumns = this.columnUtil.fundsTableColumns;
            }
        }
        await super.handleButtonEmit(type);
    }

    comReturn(obj) {
        super.comReturn(obj);
    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 5px 2px;
    border: 1px solid #f2f2f2;
    margin-bottom: 10px;
}
.noOpened /deep/ .vxe-table {
    .vxe-table--body-wrapper.body--wrapper {
        height: calc(100vh - 270px) !important;
    }
}
</style>
